<template>
	<NavBarVue :title="'活动详情'" />
	<view class="active_detail">
		<view class="top_box">
			<view class="message-detail">
				<view class="message">
					<view class="message-title">
						蛋糕美食大赛
					</view>
					<view class="message-time">
						活动时间：12:00-24:00
					</view>
				</view>
				<view class="message-detail">
					品尝美食大赛，期待你的到来
				</view>
			</view>
			<view class="x_scroll">
				<scroll-view class="scroll-view_H" enable-flex scroll-x="true" @scroll="scroll" scroll-left="0">
					<view v-for="(item, key) in ['http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png', 'http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png']" :key="key" style="width: 320rpx;height: 240rpx;margin-left: 8rpx;">
						<BaseCoverImage :src="item" />
					</view>
				</scroll-view>
			</view>
			<view class="message-image">
				<BaseCoverImage 
					src="http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png" 
					mode="aspectFill"
				/>
			</view>
		</view>
		<view class="bottom_box">
			<view class="hot_title">活动店铺</view>
			<view class="coupon_list" v-for="item in activity" :key="item.id">
				<view class="li_top">
					<view class="li_h2">
						{{item.title}}
					</view>
				</view>
				<view class="li_con">
					<view class="li-message">
						<BaseCoverImage :src="item.img" style="width: 112rpx;height: 112rpx;" />
						<view class="con_right">
							<view>活动时间：{{item.times}}</view>
							<view class="con_p">
								<view>人均：{{item.num}}/人</view>
							</view>
							<view class="con_p">{{item.slogan}}</view>
						</view>
					</view>
					<button class="li_btn">领取优惠券</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 活动列表
	const activity = [{
			img: "http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png",
			title: "精品蛋糕",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "北京市海淀区中鼎大厦B座"
		},
		{
			img: "http://dev.img.p.yufeiworld.com/lbs_attach/FEA81B6813A34FA5BA654A05E003771B.png",
			title: "爱吃蛋糕",
			times: "21:00-02:00",
			range: "21:00至次日06:00内",
			num: 20,
			slogan: "北京市海淀区中鼎大厦B座"
		}
	]
</script>

<style lang="scss">
	.active_detail {
		box-sizing: border-box;
		padding: 0 20rpx;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		font-family: PingFangSC, PingFang SC;
		background-color: #F8F8F8;
	}
	.top_box {
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		.message {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.message-title {
				font-weight: 600;
				font-size: 50rpx;
				color: #222222;
				line-height: 55rpx;
				text-align: justify;
				font-style: normal;
			}
			.message-time {
				padding-left: 30rpx;
			}
		}
		.x_scroll {
			margin: 30rpx 0;
			.scroll-Y {
				height: 300rpx;
			}
			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
				height: 240rpx;
				margin: 10rpx 0rpx;
				display: flex;
				flex-direction: row;
			}
		}
		.message-image {
			border-top: 1px solid #b2b2b2;
			padding: 40rpx 0 20rpx;
		}
	}
	.bottom_box {
		flex: 1;
		display: flex;
		flex-direction: column;
		.shadow {
			width: 100%;
			height: 16rpx;
		}
		.shop_image {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
		}
		.shop_image button{
			margin-top: 30rpx;
			background-color: #FF4D65;
			color: #fff;
			font-size: 32rpx;
		}
		.hot_title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			padding-left: 30rpx;
			font-size: 32rpx;
			color: #222222;
		}
		.coupon_list {
			background-color: white;
			color: #9C9C9C;
			margin-top: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx;
			.li_top {
				display: flex;
				justify-content: space-between;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
				margin-bottom: 20rpx;
			}
			.li_con {
				display: flex;
				justify-content: space-between;
				.li-message {
					display: flex;
				}
				.con_right {
					margin-left: 30rpx;
					font-size: 24rpx;
					.con_p {
						padding: 2rpx 0rpx;
					}
				}
			}
			.li_bom {
				flex: 1;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
		}
	}
	.li_btn {
		float: right;
		width: 168rpx;
		height: 64rpx;
		padding: 0rpx;
		margin: 0rpx;
		font-size: 24rpx;
		border-radius: 70rpx;
		line-height: 64rpx;
		color: white;
		background: linear-gradient(270deg, #FB7685 0%, #FF4D65 100%);
	}
</style>